<template>
	<!-- 系统目录 西成药品 -->
	<div class="box">
		<!-- main -->
		<div class="main" id="main">
			<!-- left -->
			<div class="main-left">
				<!-- tree -->
				<el-tree 
				:data="elTree" 
				:props="defaultProps"
				node-key="label"
				:default-expanded-keys="expandedKeys"
				accordion 
				@node-click="handleNodeClick"
				class="custom-tree"
				ref="tree"
				:expand-on-click-node="false"
				>
				<!-- 自定义节点内容 -->
				<div slot-scope="{ node, data }" class="custom-node">
					<el-checkbox v-model="data.checked">{{ node.label }}</el-checkbox>
					<!-- 下拉菜单 -->
					<el-select
					  v-if="data.showSelect && data.children"
					  v-model="data.selected"
					  class="child-select"
					  placeholder="请选择"
					  @visible-change="handleSelectVisible"
					>
					  <el-option
						v-for="item in data.children"
						:key="item.id"
						:label="item.label"
						:value="item.id"
					  />
					</el-select>
				</div>
					<span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 12px;">
						<span :name="node.label">
							<i v-if="!data.children"
							:class="node.expanded ? 'el-icon-openFile' : 'el-icon-closeFiles'"></i>
							<i v-else class="el-icon-openFile"></i>
							<span style="margin-left: 4px;">{{ node.label }}</span>
						</span>
					</span>
				</el-tree>
			</div>
			<!-- right -->
			<div class="main-right" ref="mainRight" :style="{ width: windowWidth + 'px' }">
				<!-- tit -->
				<div class="main-icon">
					<div class="main-icon-a">
						<i class="el-icon-s-promotion"
							style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;background-color: #409EFF;color: #fff;"></i>
						<span style="font-size: 12px;font-weight:400;margin-left: 12px;">行政区域</span>
					</div>
					<!-- btn1 -->
					<div class="main-icon-b">
						<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
						<el-dropdown @command="handleCommand" trigger="click">
							<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
							<el-dropdown-menu slot="dropdown">
							  <el-dropdown-item command="a">可用</el-dropdown-item>
							  <el-dropdown-item command="b">禁用</el-dropdown-item>
							  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
							</el-dropdown-menu>
					    </el-dropdown>
					</div>
					<!-- btn2 -->
					<!-- 搜索 -->
					<div class="main-icon-c">
						<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
						<el-autocomplete  popper-class="my-autocomplete" v-model="searchValue" :fetch-suggestions="querySearch" placeholder="编码、名称"
						  size='mini' @select="handleSelect">
						  <i class="el-icon-Ssearch" slot="suffix" style="cursor: pointer;margin-right: 8px;" @click="handleIconClick"></i>
						  <template slot-scope="{ item }">
							<div class="name" style="font-size: 12px;">{{ item.drugCodeName }}</div>
						  </template>
						</el-autocomplete>
					</div>
					<!-- btn3 -->
					<div class="main-icon-c">
						<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
					</div>
				</div>

				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border @row-dblclick="handledbRow">
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index"></el-table-column>
						<!-- edit -->
					</el-table>
					<!-- 分页 -->
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNum"
					:page-sizes="[5, 10, 20]"
					:page-size="pageSize"
					:total="totalSize"
					layout="total, sizes, prev, pager, next, jumper"
					background
					>
					</el-pagination>
				</div>
				<!-- feet -->
				<div class="feet" id="feet">
					<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="feetHandClick(v,i)">{{ v.title }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// selfs / js
	import Chinese from "../../external/PY.js";
	import Pinyin from "../../external/pinyin.js";
	// 行政区域
	import City from "../../external/City/data.js";
	// import box from '../../external/box.js'
	// 接口
	import { getArea,getArea2,getArea3, } from "@/api/user.js";
	export default {
		components: {
			// box
			City
		},
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// str
				windowWidth: '',//右侧表格动态宽度
				viewportHeight: 0, // 用于存储视口高度
				condtion:'' , // area_p_code , area_c_code, area_d_code, area_t_code, area_v_code
				watch:'查看',
				searchValue:'',
				toCodeNum:'0000',//拼接自增 导零
				iconHandleClick:'el-icon-plus',
				CatalogueName:'',
				DropDownedName:'可用',
				typeValue:'',
				YNuseVaule:'可用',
				nowDateTimeValue:'',
				iconComes:'el-icon-s-promotion',
				operatingTime:'',
				// boolean
				disabled:true,
				noEidt:true,
				formdisabled:true,
				loading:false,
				dialogVisible:false,	//此乃查看/编辑控制
				addDialogVisible:false, //此乃新增控制
				// number
				dataIndex: 0,
				CodeNumber:0,
				sliceSize:13, // 自定义分页截取
				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				/* obj */
				// 新增
				addForm: {
				  	code: "",
				  	gradeCode: "001",
				  	label: "",
				  	operatingTime: "",
				  	operator: "",
				  	remark: "",
				  	status: "",
				},
				// 编辑 / 查看
				form: {
				  label: '',
				  code: '',
				  status:'',
				  textSpell:'',
				  nz:'',
				  num: '',
				  opdate:'',
				  opeater:'',
				  remark:'',
				},
				// 新增验证规则
				addrules:{
				    label: [
				      { required: true, message: "名称不能为空！", trigger: "blur" },
				      { min: 2, max: 8, message: "长度在2到8个字符", trigger: "blur" },
				    ],
				    //有效状态
				    status:[
				       { required: true, message: "请选择一个有效状态！", trigger: "blur" },
				    ],
					//操作人
					operator:[
					   { required: true, message: "不能为空！", trigger: "blur" },
					]
				},
				// arr
				data: [],
				oop:[],
				onePage:[],
				twoPage:[],
				userInfo: [],
				watchData: [],
				restaurants:[],
				// 页面默认按钮// 基础按钮配置（始终显示）
				defaultButtons:[
					// { title:"新增西成药",icon:"el-icon-adds", type:"primary" },
					// { title:"修改西成药",icon:"el-icon-edit", type:"primary" },
					{ title:"查看",icon:"el-icon-watch", type:"primary" },
					{ title:"删除",icon:"el-icon-del", type:"danger" },
					// { title:"目录引用",icon:"el-icon-closeFiles", type:"primary" },
					{ title:"打印",icon:"el-icon-ggml", type:"primary" },
					{ title:"导出",icon:"el-icon-export", type:"primary" },
					{ title:"关闭",icon:"el-icon-close", type:"primary" },
				],
				// 最终使用的按钮数组
				feetBtn: [],
				expandedKeys: ['中国'], // 默认展开的节点
				YNuse:[{ id:1,label:'可用',value:'1'},{ id:2,label:'禁用',value:'2'}],
				drugTypeOptions:[{ id:1,label:'毒麻类',value:'毒麻类'},{ id:2,label:'精神类',value:'精神类'}],
				// title右侧按钮
				headerBtn:[
				 { refesh:"refesh", title:"刷新", type:"", icon:"el-icon-refresh" },
				 { senior:"senior", title:"高级", type:"", icon:"" },
				 // { add:"add", title:"新增", type:"warning" },
				],
				// title右侧按钮
				tableRows:[
					{ name:"编码", prop:"areaPCode" },{ name:"名称", prop:"fullNameRegion", type:"" },{ name:"邮政编码", prop:"areaCode", type:"" },
					{ name:"有效状态", prop:"status", type:""},{ name:"内置否", prop:"gradeCode", type:"" },
					{ name:"操作时间", prop:"operatingTime", nz:"nz" },{ name:"备注", prop:"remark", type:"" },
				],
				elTree:[
					{ label: '中国', path:'', title:'', icon:'el-icon-news',children:[]},
				],
				tableData: [],
				//obj
				pickerOptions: {
				  shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					]
				},
				
			};
		},
		computed: {
		    // 格式化数字，确保4个0后的数字自增时不会出现前导零
		    formattedNumber() {
				return '00000' + this.toCodeNum.toString().slice(1);
		    },
		  },
		mounted() {
			// 赋值给Options
			this.loadTreeData();
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.addForm.operator = this.userInfo.userName;
			this.initButtons(); // 引入全局自定义封装方法
			this.updateViewportHeight(); // 初始化视口高度
			window.addEventListener('resize', this.updateViewportHeight); // 监听窗口大小变化
		},
		beforeDestroy() {
		    window.removeEventListener('resize', this.updateViewportHeight); // 移除监听
		},
		methods: {
			// 数据源
			async loadTreeData() {
				const _this = this;
				let res = await getArea();
				res = res.data.map(v=>{ return { label:v.areaName , ...v } })
			  	this.elTree[0].children.push(...res)
			},
			initButtons() {
			    // 获取当前路由路径
			    const currentPath = this.$route.path;
			    // 获取路由对应的权限按钮
			    const routeButtons = this.$getRouteButtons(currentPath);
			    console.log(routeButtons,'routeButtonsrouteButtons');
			    // 合并到现有按钮数组
			    this.feetBtn = this.$mergeButtons(this.defaultButtons, routeButtons);
				console.log(this.feetBtn,'this.feetBtnthis.feetBtn');
			},
			// props
			querySearch(queryString, cb) {
			    console.log(queryString,'queryString');
				// queryString = this.searchValue
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				clearTimeout(this.timeout);
				this.timeout = setTimeout(() => {
				  cb(results);
				}, 888 * Math.random());
			},
			/*
				about tree
			*/
			handleNodeClick(data,node) {
				console.log(data,node);
				this.expandedKeys.push(data.label)
				if (data.areaLevel == 1) {
					// 模拟异步加载数据 => 省级下
					setTimeout(async() => {
					  this.$set(data, 'children')
					  let res = await getArea({
							areaLevel:2, areaCode: data.areaCode , condtion: 'area_p_code'
					  })
					  res.data = res.data.map(v=> { return { label:v.areaName,...v} })
					  data.children = [...res.data]
					  this.$set(data, 'showSelect', true)
					  this.onePage = res.data.slice(0,this.sliceSize)
					  this.twoPage = res.data.slice(this.sliceSize)
					  this.tableData = this.onePage
					}, 300)
				  } else if(data.areaLevel == 2){
					// 模拟异步加载数据 => 市级下
					setTimeout(async() => {
					  this.$set(data, 'children')
					  let res = await getArea({
							areaLevel:3, areaCode: data.areaCode , condtion: 'area_c_code'
					  })
					  res.data = res.data.map(v=> { return { label:v.areaName,...v} })
					  data.children = [...res.data]
					  this.$set(data, 'showSelect', true)
					  this.onePage = res.data.slice(0,this.sliceSize)
					  this.twoPage = res.data.slice(this.sliceSize)
					  this.tableData = this.onePage
					}, 300)
				  } else if(data.areaLevel == 3){
					// 模拟异步加载数据 => 区级下
					setTimeout(async() => {
					  this.$set(data, 'children')
					  let res = await getArea({
							areaLevel:4, areaCode: data.areaCode , condtion: 'area_d_code'
					  })
					  if(res.data==null){
					  	this.tableData = []
					  }else{
						res.data = res.data.map(v=> { return { label:v.areaName,...v} })
						data.children = [...res.data]
						this.$set(data, 'showSelect', true)
						this.onePage = res.data.slice(0,this.sliceSize)
						this.twoPage = res.data.slice(this.sliceSize)
						this.tableData = this.onePage
					  }
					}, 300)
				  } else if(data.areaLevel == 4){
					// 模拟异步加载数据 => 县级下
					setTimeout(async() => {
					  this.$set(data, 'children')
					  let res = await getArea({
							areaLevel:5, areaCode: data.areaCode , condtion: 'area_t_code'
					  })
					  if(res.data==null){
					  	this.tableData = []
					  }else{
						res.data = res.data.map(v=> { return { label:v.areaName,...v} })
						data.children = [...res.data]
						this.$set(data, 'showSelect', false)
						this.onePage = res.data.slice(0,this.sliceSize)
						this.twoPage = res.data.slice(this.sliceSize)
						this.tableData = this.onePage
					  }
					}, 300)
				  }else if(data.areaLevel == 5){
					// 模拟异步加载数据 => 村级
					setTimeout(async() => {
					  this.$set(data, 'children')
					  let res = await getArea({
							areaLevel:6, areaCode: data.areaCode , condtion: 'area_v_code'
					  })
					  if(res.data==null){
						this.tableData = this.tableData;
						this.$message({ type: 'success', message: '仅支持查询到对应的街道。'});
					  }else{
						data.children = [...res.data]
						this.expand = false
						this.$set(data, 'showSelect', true)
						this.onePage = res.data.slice(0,this.sliceSize)
						this.twoPage = res.data.slice(this.sliceSize)
						this.tableData = onePage
					  } 
					}, 300)
					
				  } else {
					this.$set(data, 'showSelect', !data.showSelect)
				  }
				  // 关闭其他节点的下拉
				  this.elTree.map(item => {
					if (item.id !== data.id) this.$set(item, 'showSelect', false)
				  })
			},
			// 设置默认展开的节点
			setExpandedKeys(data) {
				console.log(keys);
				const keys = [];
				function traverse(node) {
				if (node.children && node.children.length > 0) {
					keys.push(node.id);
					node.children.forEach(traverse);
				}
			}
				data.forEach(traverse);
				this.expandedKeys = keys;
			},
			handleSelectVisible(isVisible) {
			    if (!isVisible) {
			        this.treeData.forEach(item => {
			          this.$set(item, 'showSelect', false)
			        })
			    }
			},
			handleIconClick(ev) {
				// this.loadData();
			},
			handleSelect(item) {
				// this.searchValue = item.drugName
				// this.loadData();
			},
			// 窗口高度
			updateViewportHeight() {
			  this.viewportHeight = window.innerHeight - 145; // 获取并更新视口高度
			  // console.log(this.viewportHeight);
			},
			/*
				about table
			*/
		  
		   // col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			 let prop = col.prop,lab = col.lab;
			 let width = 40; // 设定一个最小值
			 let maxlenStr = ""; // 最长字符串
			 for (let info of list) {
			   if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			 }
			 width = Math.max(width, len(lab), len(maxlenStr));
			 // 表格自带的内边距(20px) 自调
			 return width + 8; // 这里加了 18px
			 function len(str) {
			   // 实际分配长度可根据需要自行调整
			   let length = 8;
			   for (const char of str + "") {
				 // 英文小写字符 8px
				 if ("a" <= char && char <= "z") length += 18;
				 // 英文大写字符 8px
				 else if ("A" <= char && char <= "Z") length += 18;
				 // 中文字符 28px
				 else if (char >= "\u4e00" && char <= "\u9fa5") length += 18;
				 // 其他 8px
				 else length += 12;
			   }
			   return length;
			  }
		    },
			// see table
			handleDelete(id){
				this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}).then(async () => {
						let res = await deleteByPoison(id);
						let { code, message } = res;
						if (res.code === 200) {
							this.$message({
								type: "success",
								message: message,
							});
							this.loadData(); //更新数据驱动
						} else {
							this.$message.error(message);
						}
					})
					.catch(() => {
						this.$message({
							type: "fail",
							message: '失败',
						});
					});
			},
			// edit table
			handleClickEdit(val){
				this.watch = '编辑';
				this.form = val; this.dialogVisible = true;this.noEidt = true,
				this.formdisabled = false;
			},
			// 编辑保存
			async saveEditData(){
				console.log(this.form);
				let rs = await updatePoisonAnesthesia(this.form);
				let { code,message } = rs;
				if (code === 200) {
					this.$message({
						type: 'success',
						message: '修改成功！',
					});
					this.loadData(); //更新驱动
					this.dialogVisible = false;
				} else {
					this.$message.error('失败！')
				}
			},
			//新增保存
			addNewData(){
				// let res = await addPoisonAnesthesia(this.addForm)
				console.log(this.addForm);
				//触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				  if(valid){
				    //验证通过
				    // console.log('submit');
				    let res = await addPoisonAnesthesia(this.addForm)
				    console.log(res);
					if (res.code === 200){
					this.$message({
						message:res.message,
						type:"success"
					});
					this.loadData(); //更新数据驱动
					}else{
					  //验证失败
					  console.log('失败');
					}
				}
				});
			},
			// input 
			inputLabel(){
				this.addForm.code = this.makePy(this.addForm.label).toLocaleUpperCase().slice(0,1) + this.formattedNumber + this.CodeNumber;//编码
				this.addForm.textSpell = this.makePy(this.addForm.label).toLocaleUpperCase();//拼音简码
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.formdisabled = true;
					done();
				  })
				  .catch(_ => {
					this.formdisabled = this.formdisabled;
				  });
			},
			// db events
			handledbRow(row, column, event){
				if(row){ this.form = row; this.dialogVisible = true } else { console.log('fail'); }
				// console.log(this.form);
				this.formdisabled = true
				this.form.textSpell = this.makePy(this.form.label).toLocaleUpperCase()
				// console.log(this.form.textSpell);
			},

			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑
						this.loading = true;
						if(this.searchValue == ''){
							setTimeout(() => {
								this.$message.error('关键字不能为空！');
								this.loading = false;		
							}, 1500)
						}else{
							this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						}
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						this.addDialogVisible = true
						break;
				}
			},
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				if(val === 1){
					this.tableData = this.onePage
				}else{
					this.tableData = this.twoPage
				}
			},
			// 实时宽度
			updateWindowWidth() {
			    this.windowWidth = window.innerWidth - 328;
			},
			// 系统当前日期时间
			nowDateTime(){
				const now = new Date(); //创建时间日期对象
				const year = now.getFullYear(); //年
				const month = now.getMonth() + 1; //月份是从0开始的
				const day = now.getDate(); //日
				const hours = now.getHours(); //小时
				const minutes = now.getMinutes(); //分钟
				const seconds = now.getSeconds(); //秒
				const currentDate = `${year}-${month}-${day}`.replace(/-/g, '') //替换操作
				this.nowDateTimeValue = `${year}-${month}-${day}` + ` ` + `${hours}:${minutes}:${seconds}`
				// this.datetimesinglend = 
				// 将字符串转换为Date对象
				// console.log(this.nowDateTimeValue);
			}
			
		}
	}
</script>


<style lang="less" scoped>
	.box {
	  height: calc(100vh - 64px); // 减去导航栏高度
	  width: 100%;
	  overflow: hidden;
	/deep/ .el-table .cell{
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	/deep/ .el-table th{
		font-size: 12px;
		background-color: #f1f1f1;
		border: none;
		color: #2d2d2d;
	}
	/deep/ .el-table {
	    width: 100%;
	    height: 100% !important;
	    .el-table__body-wrapper {
	      overflow-x: hidden;
	    }
	}
	/* 自定义高亮颜色 */
	::v-deep .el-table__body tr.current-row > td {
	  background-color: #00557f !important;
	  color: #f9f9f9; /* 可选：修改文字颜色 */
	}
	  .main {
	    display: flex;
	    height: 100%;
	    width: 100%;
	
	    // 左侧树形菜单
	    .main-left {
	      width: 268px;
	      height: 100%;
	      background: #f5f7fa;
	      border-right: 1px solid #e6e6e6;
	      overflow-y: auto;
	      scrollbar-width: none; /* Firefox */
	      -ms-overflow-style: none; /* IE 10+ */
	      
	      &::-webkit-scrollbar {
	        display: none; /* Chrome Safari */
	      }
	
	      /deep/ .el-tree {
	        height: 100%;
	        .el-tree-node__content {
	          height: 36px;
	        }
	      }
	    }
	    
	    // 右侧内容区域
	    .main-right {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      height: 100%;
	      overflow: hidden;
	      
	      // 顶部搜索区域
		.main-icon {
			display: flex;
			align-items: center;
			padding: 12px;
			line-height: 40px;
			.main-icon-a{
				// width: 240px;
				// background-color: #00557f;
			}
			.main-icon-b{
				margin-left: 28px;
				/deep/ .el-dropdown{
					font-size: 12px;
					cursor: pointer;
				}
				/deep/ .el-dropdown:hover {
					font-weight: bold;
					color: #66b1ff;
				}
				/deep/ .el-icon--right{
					// background-color: #66b1ff;
				}
				/deep/ .el-popper[x-placement^=bottom]{
					margin-top: 0;
				}
			}
			// c
			.main-icon-c{
				display: flex;
				margin-left: 28px;
				/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
					width: 80%;
				}
			}
		}
	      
	      // 表格容器（带滚动）
	      .table {
	        flex: 1;
			width: 100%;
	        overflow: hidden;
	        display: flex;
	        flex-direction: column;
			/deep/ .el-pagination {
				margin: 12px;
			}
	    }
	      
	      // 底部固定区域
	      .feet {
	        height: 40px;
	        display: flex;
			align-items: center;
	        padding: 12px;
	        background: #fff;
	        border-top: 1px solid #e6e6e6;
	        flex-shrink: 0;
	        
	        .feetBtn {
	          gap: 8px;
	        }
			
	        }
	    }
	  }
		
		.addModel{
			/deep/ .el-dialog__header{
				padding: 12px;
				line-height: 28px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
		}
		.editModel{
			/deep/ .el-dialog__header{
				padding: 12px;
				line-height: 28px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
		}
	}

</style>